<template>
  <div>
    <van-tabbar v-model="active" id="TabNav">
      <van-tabbar-item icon="home-o">精选</van-tabbar-item>
      <van-tabbar-item icon="chat-o" dot>消息</van-tabbar-item>
      <van-tabbar-item icon="cart-o" info="5">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "TabNav",
  data() {
    return {
      active: null
    };
  },
  beforeMount() {
    this.active = 0;
    // console.log(this.active);
  },
  watch: {
    active() {
      console.log(this.active);
      switch (this.active) {
        case 0:
          this.$router.push("./Home");
          break;
        case 1:
          this.$router.push("./Info");
          break;
        case 2:
          this.$router.push("./Iscroll");
          // this.$router.push("./Cart");
          break;
        case 3:
          this.$router.push("./UserCenter");
          break;
        case 4:
          this.$router.push("./Iscroll");
          break;
        default:
          this.$router.push("./Home");
          break;
      }
    }
  }
};
</script>

<style scoped>
#TabNav {
  z-index: 1000 !important;
}
</style>
